<template>
  <div class="layout-menu w-full">
    <a-menu
      mode="horizontal"
      v-model:selectedKeys="selectedKeys"
      @click="handleClick"
      class="w-full h-full"
    >
      <Menus :menuList="routerList"></Menus>
    </a-menu>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import type { MenuProps } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { useRouters } from '@/hooks/useRouters'

import Menus from './components/Menu.vue'
import { useInfoStore } from '@/store'
const router = useRouter()
const selectedKeys = ref<string[]>([])

const handleClick: MenuProps['onClick'] = (menuInfo) => {
  router.push(menuInfo.key as string)
}

const routerList = ref<any[]>([
  {
    menuName: '首页',
    path: '/',
    children: [],
    menuId: 0,
    menuType: 'C'
  }
])

const userStore = useInfoStore()
const { getRouters } = useRouters()

const getRouterFun = async () => {
  const data = await getRouters()
  routerList.value = [...routerList.value, ...data]
  console.log(routerList.value)
  userStore.getRouters(routerList.value)
}

onMounted(() => {
  getRouterFun()
  selectedKeys.value = [router.currentRoute.value.path]
})

watch(
  () => router.currentRoute.value.path,
  () => {
    selectedKeys.value = [router.currentRoute.value.path]
  }
)
</script>
